<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style/editor.css" rel="stylesheet" type="text/css">
<script>
	var sLangDir=window.opener.oUtil.langDir;
	document.write("<scr"+"ipt src='../language/"+sLangDir+"/styles.js'></scr"+"ipt>");
</script>
<script>writeTitle()</script>
<script>
function doWindowFocus()
    {
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    }
    
function bodyOnLoad()
    {
    window.onfocus=doWindowFocus;
    window.opener.oUtil.onSelectionChanged=new Function("realTime()");
    
    var obj=window.opener.oUtil.obj;
    
    arrStyle = obj.arrStyle;
    var sStyle=""
    for(var i=0;i<arrStyle.length;i++)
        {
        sStyle+=arrStyle[i][0]+"{"+ arrStyle[i][3]+"}"+ "\n"
        }
    
    var idPreview = document.getElementById("idPreview").contentWindow;

    var sHTML="<HTML><HEAD><STYLE>"+sStyle+"</STYLE></HEAD><BODY margin-left=0 margin-top=0 margin-right=0 margin-bottom=0><table width=100% height=100%><tr><td id=idPreviewTarget valign=middle align=center>&nbsp;</td></tr></table></BODY></HTML>";
    var oDoc=idPreview.document.open("text/html", "replace");
    oDoc.write(sHTML);
    oDoc.close();
            
    realTime()
    }

function realTime()
    {
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    var obj=window.opener.oUtil.obj;
    
    var isTextSel = window.opener.isTextSelected(oSel);
    
    var oElement;
    if(window.opener.oUtil.activeElement)
        oElement=window.opener.oUtil.activeElement
    else
        oElement = window.opener.getSelectedElement(oSel);        
    
    var tagName=oElement.tagName;
        
    var inpClassName = document.getElementById("inpClassName");
    var idPreview = document.getElementById("idPreview").contentWindow;
    var selApply_to = document.getElementById("selApply_to");
    
    if (!isTextSel) selApply_to.value = "Current Tag";
    //selApply_to.value = (isTextSel) ? "Selected Text" : "Current Tag";
    
    while(inpClassName.options.length!=0) 
        {
        inpClassName.options[inpClassName.options.length-1] = null;
        }
        
    var op = document.createElement("OPTION");
    op.text="Clear Formatting..";
    op.value="";
    inpClassName.options[inpClassName.options.length] = op;       
        
    arrStyle = obj.arrStyle;
    for(var i=0;i<arrStyle.length;i++)
        {
        sSelector=arrStyle[i][0];
        isOnSelection=arrStyle[i][1];
        if(isOnSelection)
            {
            sCaption=arrStyle[i][2];
                
            if(sSelector.split(".").length>1)
                {
                if(sSelector.split(".")[0]==tagName || sSelector.split(".")[0]=="")//show
                    {
                    var op = document.createElement("OPTION");
                    op.text=sCaption;
                    op.value=sSelector.split(".")[1];
                    inpClassName.options[inpClassName.options.length] = op;
                    }
                }
            else
                {
                var op = document.createElement("OPTION");
                op.text=sCaption;
                op.value=sSelector;
                inpClassName.options[inpClassName.options.length] = op;
                }
            }
        }

    inpClassName.value=oElement.className;
    if(inpClassName.selectedIndex!=-1)
        {
        idPreview.document.getElementById("idPreviewTarget").innerHTML=inpClassName.options[inpClassName.selectedIndex].text;
        idPreview.document.getElementById("idPreviewTarget").className=inpClassName.value;
        }
    }

var sClassName;
function doApply()
    {
    var oEditor=window.opener.oUtil.oEditor;
    var oSel=oEditor.getSelection();
    
    var obj=window.opener.oUtil.obj;
    
    window.opener.oUtil.obj.saveForUndo();
    
    var inpClassName = document.getElementById("inpClassName");
    var selApply_to = document.getElementById("selApply_to");
    
    
    var oElement;    
    if(inpClassName.value=="")//Selalu berarti me-remove class di CURRENT TAG!
        {
        if(window.opener.oUtil.activeElement)
            {
            oElement=window.opener.oUtil.activeElement
            }
        else
            {       
            oElement=window.opener.getSelectedElement(oSel);
            }

        if(oElement)
            {
            if(oElement.tagName!="BODY") 
                {               
                oElement.removeAttribute("className");

                //cek juga style attr (oElement.style.cssText)
                if(oElement.tagName=="FONT" && oElement.color=="" && oElement.face=="" && oElement.size=="" && oElement.id=="" && oElement.style.cssText=="")
                    obj.doCmd('RemoveFormat');
                }
            else
                {
                alert(getTxt("You're selecting BODY element."));
                return;
                }
            }
        }   
    else if(selApply_to.value=="Selected Text")
        {
        if (!window.opener.isTextSelected(oSel)) {
            alert(getTxt("Please select a text."));
            return;
        }
        
        var idNewSpan=obj.applySpan();
        if(idNewSpan)//if there is selected text
            {
            if(inpClassName.value=="") idNewSpan.removeAttribute("className");
            else idNewSpan.className=inpClassName.value;
            }       
        }
    else if(selApply_to.value=="Current Tag")
        {
        if(window.opener.oUtil.activeElement)
            {
            oElement=window.opener.oUtil.activeElement
            }
        else
            {       
            oElement=window.opener.getSelectedElement(oSel);
            }
                
        if(oElement)
            {
            if(oElement.tagName!="BODY") 
                {
                oElement.className=inpClassName.value;  
                }
            else
                {
                alert(getTxt("You're selecting BODY element."));
                return;
                }
            }
        }

    //realTime()
    sClassName=inpClassName.value;
    
    }

function doStyleChange()
    {
    var idPreview = document.getElementById("idPreview").contentWindow;
    var inpClassName = document.getElementById("inpClassName");
    
    idPreview.document.getElementById("idPreviewTarget").innerHTML=inpClassName.options[inpClassName.selectedIndex].text
    idPreview.document.getElementById("idPreviewTarget").className=inpClassName.value
    }
    
</script>
</head>
<body onload="loadTxt();bodyOnLoad()" style="overflow:hidden;">

<table width=100% height=100% align=center cellpadding=0 cellspacing=0>
<tr>
<td valign=top style="padding:5;height:100%">
    <table width=100%>
    <tr>
    <td nowrap>
        <div style='font-family:Verdana;font-size:10px;color:black;padding-bottom:3'><b><span id=txtLang name=txtLang>Styles</span>:</b></div>
        <select size=10 style="height:100" id="inpClassName" name="inpClassName" onchange="doStyleChange()" class="inpSel">
        <option></option>
        </select>
    </td>
    </tr>
    <tr>
    <td nowrap style="padding-top:5px;padding-bottom:5px;">
        <div style='font-family:Verdana;font-size:10px;color:black;padding-bottom:4'align=left><b><span id=txtLang name=txtLang>Preview</span>:</b></div>
        <iframe style="width:100%;height:75px;border:#d3d3d3 1px solid;background-color:#ffffff" name=idPreview id=idPreview></iframe> 
    </td>
    </tr>
    <tr>
    <td nowrap align=right><b><span style='font-size:10px;' id=txtLang name=txtLang>Apply to</span>:&nbsp;</b>
        <select name="selApply_to" ID="selApply_to" class="inpSel">
            <option value="Selected Text" id="optLang" name="optLang">Selected Text</option>
            <option value="Current Tag" id="optLang" name="optLang" selected>Current Tag</option>
        </select>   
    </td>
    </tr>
    </table>
</td>
</tr>
<tr>
<td class="dialogFooter" style="padding:13;padding-top:7px;padding-bottom:7px;" align="right">
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnApply id=btnApply value="apply" onclick="doApply();realTime();document.getElementById('inpClassName').value=sClassName;window.focus();" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
    <input type="button" name=btnOk id=btnOk value=" ok " onclick="doApply();self.close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
</td>
</tr>
</table>

</body>
</html>